Methods and systems for user-interface-assisted composition construction

ABSTRACT

Disclosed herein are methods and systems for user-interface-assisted composition construction. In an embodiment, a plurality of input fields, each having an argument-element type, is presented via a client-side user interface, initially arranged according to a predefined sequence. Textual inputs are received via the input fields, and corresponding argument-building-block elements are responsively presented via the client-side user interface according to a current arrangement on the client-side user interface of the input fields. Each presented argument-building-block element has the same argument-element type and the received textual input of the corresponding user-interface input field. Argument-building selections of one or more of the presented argument-building-block elements are received via the client-side user interface, and a composition is responsively generated in a displayed text editor at least in part by populating the textual inputs into the displayed text editor according to the received argument-building selections. The generated composition is submitted for evaluation.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application claims the benefit of U.S. Provisional PatentApplication No. 62/292,005, filed Feb. 5, 2016 and entitled “Methods andSystems for User-Interface-Assisted Composition Construction,” and U.S.Provisional Patent Application No. 62/292,012, filed Feb. 5, 2016 andentitled “Methods and Systems for Mitigating the Effects of IntermittentNetwork Connectivity in Educational Settings,” the entire contents ofboth of which are hereby incorporated herein by reference.

BACKGROUND

Today's students are living and studying in an increasinglytechnological age. Computers, mobile devices, and Internet communicationare virtually ubiquitous in modern society. Today's classrooms are noexception. More and more, today's schools are equipped with Internetaccess in the classroom, be it by way of wired (typically Ethernet) orwireless (typically Wi-Fi) connections. In an example scenario, a givenschool may connect to the outside world (e.g., to the Internet) by wayof a firewalled network access server (NAS), which may in turn provideconnectivity to computers on various floors, in various classrooms, invarious computer labs, in various offices or other administrativelocations, and the like.

Whether in a classroom, in a computer lab, or perhaps at a remotelocation (e.g., doing homework at home in the evening), a student mayaccess technological educational tools in a number of different ways andvia a number of different types of devices. The student may interactwith an installed application and/or webpages via a web browser, asexamples. The device may be a smartphone, a tablet, a laptop computer, adesktop computer, and/or the like.

Among other purposes, technological educational tools are used in orderto effectively teach students and also in order to better prepare thosestudents for the increasingly technological world in which they aregrowing up and which they are studying in preparation of joining. It isimportant that technological educational tools are a net positive in theclassroom: they should add to the teacher's ability to effectivelyconvey concepts, assign tasks, and assess progress; they should notinefficiently bog down the educational process with cumbersome andinefficient implementations. Technology in the classroom and generallyas part of educating students is not necessarily a good in and ofitself; it has to be done well.

OVERVIEW OF DISCLOSED EMBODIMENTS

Disclosed herein are methods and systems for user-interface-assistedcomposition construction.

One embodiment takes the form of a method that includes presenting, viaa client-side user interface, a plurality of user-interface input fieldsthat are initially arranged on the client-side user interface accordingto a predefined sequence. Each of the user-interface input fields has arespective argument-element type from among a plurality ofargument-element types. The method also includes receiving textualinputs via the respective user-interface input fields, and responsivelypresenting corresponding argument-building-block elements via theclient-side user interface according to a current arrangement on theclient-side user interface of the user-interface input fields. Eachpresented argument-building-block element has the same argument-elementtype as, and includes the textual input received via, the correspondinguser-interface input field. The method also includes receiving, via theclient-side user interface, argument-building selections of one or moreof the presented argument-building-block elements, and responsivelygenerating a composition in a displayed text editor at least in part bypopulating the textual inputs into the displayed text editor accordingto the received argument-building selections. The method also includessubmitting the generated composition for evaluation.

Another embodiment takes the form of a client-side computing device thatincludes a client-device communication interface, a client-device userinterface, a client-device processor, and client-device data storagecontaining client-device instructions executable by the client-deviceprocessor for causing the client-side computing device to carry out atleast the functions listed in the preceding paragraph.

In at least one embodiment, the plurality of argument-element typesincludes claim, reasoning, and evidence. In at least one suchembodiment, the plurality of argument-element types also includes reasonand counterargument; in at least one such embodiment, the predefinedsequence is claim, reason, evidence, reasoning, counterargument.

In at least one embodiment, the generated composition pertains to asource-material selection, and the method also includes presenting, viathe client-side user interface, the source-material selection injuxtaposition with the presented plurality of user-interface inputfields. Such embodiments are referred to for brevity and clarity in theensuing paragraphs as source-material-selection embodiments.

In at least one source-material-selection embodiment, the method alsoincludes receiving annotation input with respect to the presentedsource-material selection, and responsively updating the presentedsource-material selection to reflect the received annotation input. Inat least one such source-material-selection embodiment, the receivedannotation input includes note input. In at least one suchsource-material-selection embodiment, the received annotation inputincludes highlighting input with respect to a portion of the presentedsource-material selection; such embodiments are referred to for brevityand clarity in the ensuing paragraphs as highlighted-source-materialembodiments.

In at least one highlighted-source-material embodiment, the method alsoincludes presenting, via the client-side user interface, an additionalargument-building-block element that includes the highlighted portion ofthe presented source-material selection. In at least one suchhighlighted-source-material embodiment, an argument-element type of theadditional argument-building-block element is evidence. In at least onesuch highlighted-source-material embodiment, presenting the additionalargument-building-block element via the client-side user interface iscarried out responsive to receiving the highlighting input. In at leastone such highlighted-source-material embodiment, the method alsoincludes receiving, via the client-side user interface, anadd-building-block command with respect to the highlighted portion ofthe presented source-material selection, and presenting the additionalargument-building-block element via the client-side user interface iscarried out responsive to receiving the add-building-block command.

In at least one embodiment, the presented argument-building-blockelements have the appearance of respective index cards.

In at least one embodiment, the corresponding argument-building-blockelements are presented in a designated staging area on the client-sideuser interface.

In at least one embodiment, the method also includes receiving, via theclient-side user interface, reordering input with respect to theuser-interface input fields, and responsively reordering both theuser-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input. In at least one such embodiment: (i) the method alsoincludes, prior to receiving the reordering input, receiving, via theclient-side user interface, linking input with respect to a contiguoussequence of two or more of the user-interface input fields; (ii) thecontiguous sequence of the user-interface input fields corresponds to acontiguous sequence of the argument-building-block elements; and (iii)reordering both the user-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input includes keeping intact both (a) the contiguoussequence of user-interface input fields and (b) the contiguous sequenceof the argument-building-block elements. In at least one other suchembodiment: (i) the method also includes, prior to receiving thereordering input, receiving, via the client-side user interface, linkinginput with respect to a contiguous sequence of two or more of theargument-building-block elements; (ii) the contiguous sequence of theargument-building-block elements corresponds to a contiguous sequence ofcorresponding user-interface input fields; and (iii) reordering both theuser-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input includes keeping intact both (a) the contiguoussequence of user-interface input fields and (b) the contiguous sequenceof the argument-building-block elements.

In at least one embodiment, the method also includes receiving, via theclient-side user interface, reordering input with respect to theargument-building-block elements, and responsively reordering both theuser-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input. In at least one such embodiment: (i) the method alsoincludes, prior to receiving the reordering input, receiving, via theclient-side user interface, linking input with respect to a contiguoussequence of two or more of the user-interface input fields; (ii) thecontiguous sequence of the user-interface input fields corresponds to acontiguous sequence of the argument-building-block elements; and (iii)reordering both the user-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input includes keeping intact both (a) the contiguoussequence of user-interface input fields and (b) the contiguous sequenceof the argument-building-block elements. In at least one other suchembodiment: (i) the method also includes, prior to receiving thereordering input, receiving, via the client-side user interface, linkinginput with respect to a contiguous sequence of two or more of theargument-building-block elements; (ii) the contiguous sequence of theargument-building-block elements corresponds to a contiguous sequence ofcorresponding user-interface input fields; and (iii) reordering both theuser-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input includes keeping intact both (a) the contiguoussequence of user-interface input fields and (b) the contiguous sequenceof the argument-building-block elements.

In at least one embodiment: (i) the method also includes, receiving, viathe client-side user interface, linking input with respect to acontiguous sequence of two or more of the user-interface input fields;(ii) the contiguous sequence of the user-interface input fieldscorresponds to a contiguous sequence of the argument-building-blockelements; (iii) a particular received argument-building selection iswith respect to the contiguous sequence of the argument-building blockelements; and (iv) populating the corresponding textual input into thedisplayed text editor includes populating into the displayed text editora concatenated sequence of the respective textual inputs of therespective argument-building-block elements of the contiguous sequenceof the argument-building-block elements.

In at least one embodiment: (i) the method also includes receiving, viathe client-side user interface, linking input with respect to acontiguous sequence of two or more of the argument-building blockelements; (ii) a particular received argument-building selection is withrespect to the contiguous sequence of the argument-building blockelements; and (iii) populating the corresponding textual input into thedisplayed text editor includes populating into the displayed text editora concatenated sequence of the respective textual inputs of therespective argument-building-block elements of the contiguous sequenceof the argument-building-block elements.

In at least one embodiment, the method also includes presenting, via theclient-side user interface, a plurality of additional user-interfaceelements that are selectable for displaying additional instances ofuser-interface input fields having respective argument-element typesfrom among the plurality of argument-element types.

In at least one embodiment, the client-side user interface includes adedicated content-display pane and a dedicated working pane. In at leastone such embodiment, the client-side user interface also includes (i) afirst control panel for selecting what is displayed in the dedicatedcontent-display pane from among a plurality of content-display optionsand (ii) a second control panel for selecting what is displayed in thededicated working pane from among a plurality of working-pane options.In at least one such embodiment, the plurality of content-displayoptions includes two or more of a source-material selection on which thecomposition is to be based, an overview of the source-materialselection, a selection of vocabulary pertaining to the source-materialselection, a rubric pertaining to the composition, a set of userannotations of the source-material selection, and a designated stagingarea for user work product pertaining to the source-material selection.In at least one such embodiment, the plurality of working-pane optionsincludes an ordered series of predefined different types of user-inputstages for producing the composition based on the source-materialselection.

In at least one embodiment, at least one received argument-buildingselection is received as a single click.

In at least one embodiment, at least one received argument-buildingselection is received as a drag-and-drop action.

In at least one embodiment: (i) the method also includes receivingtext-modification input via the displayed text editor with respect tothe populated textual inputs and (ii) generating the composition furtherincludes modifying the populated textual inputs in the displayed texteditor according to the received text-modification input prior tosubmitting the generated composition for evaluation.

In at least one embodiment: (i) the method also includes iterativelysaving the generated composition to a remote server and (ii) submittingthe generated composition for evaluation includes transmitting a messageto the remote server to indicate that the iteratively saved compositionhas been deemed submitted for evaluation.

In at least one embodiment, evaluation includes grading in aneducational context.

In at least one embodiment, the method also includes (i) monitoringpresence and absence of connectivity to a remote server, (ii) operatingin a local-saving mode during absence of connectivity, and (iii)operating in a remote-saving mode during presence of connectivity.

In at least one embodiment, the method also includes (i) detecting, viathe client-side user interface, a modification to the textual input in agiven user-interface field in the plurality of user-interface fields,and responsively updating a status parameter of the given user-interfacefield from a clean state to a dirty state and (ii) including the givenuser-interface field in a save operation on the basis of the statusparameter of the given user-interface field being in the dirty state. Inat least one such embodiment, the method also includes determining thatthe save operation was successful, and responsively updating the statusparameter of the given user-interface field to the clean state.

In at least one embodiment, the method also includes detecting, via theclient-side user interface, a save-triggering event, and responsivelymaking at least one save attempt to save a student's current work to aremote server. Such embodiments are referred to for brevity and clarityin the ensuing paragraphs as save-triggering-event embodiments.

In at least one save-triggering-event embodiment, the save-triggeringevent includes a focus-change event. In at least one suchsave-triggering-event embodiment, the focus-change event includes auser-interface-element-close event. In at least one suchsave-triggering-event embodiment, the focus-change event includes auser-interface-element-hide event. In at least one suchsave-triggering-event embodiment, the focus-change event includes auser-interface-element-switch event; in at least one suchsave-triggering-event embodiment, the user-interface-element-switchevent includes modification of a first user-interface element followedby selection of a second user-interface element; in at least one suchsave-triggering-event embodiment, the user-interface-element-switchevent includes modification of a first user-interface element followedby modification of a second user-interface element.

In at least one save-triggering-event embodiment, the save-triggeringevent includes a user-interface-element-reorder event.

In at least one save-triggering-event embodiment, the student's currentwork includes incremental work by the student with respect to a previoussave.

In at least one save-triggering-event embodiment, making at least onesave attempt includes (i) making a first save attempt and initiating anattempt timer and (ii) detecting an expiration of the attempt timer, andresponsively making a second save attempt.

In at least one save-triggering-event embodiment, the method alsoincludes detecting failure to save the student's work to the remoteserver by each and every save attempt in the at least one save attempt,and responsively transitioning the client-side user interface to aread-only state. In at least one such save-triggering-event embodiment,the client-side user interface is transitioned to the read-only statefor a predetermined time period; in at least one suchsave-triggering-event embodiment, the method also includes, afterexpiration of the predetermined time period, making at least oneadditional save attempt to save the student's current work to the remoteserver.

In at least one save-triggering-event embodiment, the student's currentwork pertains to multiple different types of assigned tasks.

In at least one embodiment, the method is carried out at least in partby a web browser executing on a processor-basedcomputing-and-communication system.

In at least one embodiment, the method is carried out at least in partby runtime execution of JavaScript code.

In at least one embodiment, the method is carried out at least in partby a JavaScript argument-builder studentResponse model. In at least onesuch embodiment, the JavaScript argument-builder studentResponse modelis a child model of a JavaScript studentAssignment model; in at leastone such embodiment, the JavaScript studentAssignment model includes atleast one additional child JavaScript studentResponse model other thanthe JavaScript argument-builder studentResponse model; in at least onesuch embodiment, the at least one additional child JavaScriptstudentResponse model includes a different-format JavaScriptstudentResponse model having a different student-input format than thatof the JavaScript argument-builder studentResponse model; in variousdifferent such embodiments, the student-input format of adifferent-format JavaScript studentResponse model may include afree-text format, a multiple-choice format, a sentence-completion formatthat utilizes prepopulated sentence stubs, and/or a text-highlightingformat.

Moreover, any of the variations and permutations described above and/oranywhere else in this disclosure can be implemented with respect to anyembodiments, including with respect to any method embodiments and withrespect to any system embodiments. Furthermore, this flexibility andcross-applicability of embodiments is present in spite of the use ofslightly different language (e.g., process, method, steps, functions,set of functions, and the like) to describe and/or characterize suchembodiments.

Furthermore, the above-listed overview of disclosed embodiments is meantto be illustrative and is not meant to be exhaustive, comprehensive, orotherwise limiting. Those of skill in the relevant art will understandthis and will further understand that variations and modifications ofthe above-listed embodiments, and indeed of any of the disclosedembodiments, can be made without departing from the spirit or scope ofthe present disclosure.

BRIEF DESCRIPTION OF THE DRAWINGS

FIG. 1 depicts an example communication system that includes an exampleserver and a number of example client-side computing devices, inaccordance with at least one embodiment.

FIG. 2 depicts an example structure of the example server of FIG. 1, inaccordance with at least one embodiment.

FIG. 3 depicts an example structure of an example one of the client-sidecomputing devices of FIG. 1, in accordance with at least one embodiment.

FIG. 4 depicts an example method, in accordance with at least oneembodiment.

FIG. 5 is a first example screenshot of a client-side user interface, inaccordance with at least one embodiment.

FIG. 6 is a second example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 7 is a third example screenshot of a client-side user interface, inaccordance with at least one embodiment.

FIG. 8 is a fourth example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 9 is a fifth example screenshot of a client-side user interface, inaccordance with at least one embodiment.

FIG. 10 is a sixth example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 11 is a seventh example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 12 is an eighth example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 13 is a ninth example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 14 is a tenth example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 15 is an eleventh example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 16 is a twelfth example screenshot of a client-side user interface,in accordance with at least one embodiment.

FIG. 17 is a thirteenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 18 is a fourteenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 19 is a fifteenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 20 is a sixteenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 21 is a seventeenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 22 is an eighteenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 23 is a nineteenth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 24 is a twentieth example screenshot of a client-side userinterface, in accordance with at least one embodiment.

FIG. 25 is a twenty-first example screenshot of a client-side userinterface, in accordance with at least one embodiment.

Before proceeding with this detailed description, it is noted that theentities, connections, arrangements, and the like that are depictedin—and described in connection with—the various figures are presented byway of example and not by way of limitation. As such, any and allstatements or other indications as to what a particular figure“depicts,” what a particular element or entity in a particular figure“is” or “has,” and any and all similar statements—that may in isolationand out of context be read as absolute and therefore limiting—can onlyproperly be read as being constructively preceded by a clause such as“In at least one embodiment . . . ” And it is for reasons akin tobrevity and clarity of presentation that this implied leading clause isnot repeated ad nauseum in the below detailed description of thedrawings.

DETAILED DESCRIPTION OF THE DRAWINGS

FIG. 1 depicts an example communication system that includes an exampleserver and a number of example client-side computing devices, inaccordance with at least one embodiment. In particular, FIG. 1 depicts acommunication system 100 that includes a server 102, adata-communication link (i.e., link) 104, a packet-data network 106, alink 108, a firewall 110, a link 112, an NAS 114, a link 116, a router118, a link 120, a wired local area network (LAN) 122, links 124-126,desktop computers 128-134, a link 136, a wireless access point 138,links 140, a tablet 142, laptop computers 144-146, a classroom-networkzone 148, and a school-network zone 150. It should be understood thatthe communication system 100 is presented by way of example and notlimitation, as numerous other example communication systems could bepresent in various different scenarios.

The server 102 is connected by the link 104 to the packet-data network106. An example structure of the server 102 is discussed below inconnection with FIG. 2. The link 104, like all links discussed in thisdisclosure, could include one or more wired links, one or more wirelesslinks, one or more networks, one or more access points, one or morerouters, switches, bridges, computers, etc. And although certain links(e.g., the links 140) are depicted as being wireless links, it isreiterated that any one or more of the links discussed herein could bewired and/or wireless in nature. Furthermore, the packet-data network106 may be, include, be part of, be connected to, or be independent ofthe global network of networks commonly known as the Internet. Entitiesthat communicate via the packet-data network 106 may do so usingInternet Protocol (IP) communication, and may be identified using IPaddresses.

As mentioned above, the communication system 100 includes theschool-network zone 150 that itself includes the classroom-network zone148. These designations are by way of example and not limitation. In thedepicted example, the firewall 110 is connected to the packet-datanetwork 106 via the link 108. The firewall 110 may act to protectentities within the school-network zone 150 from malicious and unwantedcommunication, among other functions. The firewall 110 is connected viathe link 112 to the NAS 114, which may serve, via the firewall 110, as apoint of contact to the outside world (e.g., to the packet-data network106) for all entities within the school-network zone 150. The link 116connects the NAS 114 with the entities that are within theclassroom-network zone 148, which may represent computing andcommunication entities that are associated with a particular classroom,as an example. In particular, the link 116 connects the NAS 114 with therouter 118. It is noted that the NAS 114 and/or another device mayhandle routing duties, in which case the router 118 could simply be abridge, switch, or the like; for convenience, that device is referred toherein as the router 118.

The router 118 is connected via the link 120 to the wired LAN 122, whichin turn is connected by the links 124 with the desktop computers 128 and130 and by the links 126 with the desktop computers 132 and 134. Each ofthe desktop computers 128-134 may include a typical setup having amonitor, keyboard, mouse, and the like. The router 118 is also connectedvia the link 136 to the wireless access point 138, which in turn isconnected via the links 140 with the tablet 142 and with the laptopcomputers 144 and 146. It is noted that the term client-side computingdevice is used herein, and that each of the desktop computers 128-134,the tablet 142, and each of the laptop computers 144 and 146 are anexample of a client-side computing device as that term is used in thisdisclosure. And there could be other types of client-side computingdevices as well, such as but not limited to smartphones. An examplestructure of an example client-side computing device is discussed belowin connection with FIG. 3.

FIG. 2 depicts an example structure of the example server of FIG. 1, inaccordance with at least one embodiment. As depicted in the example ofFIG. 2, the server 102 includes a server-device communication interface202, a server-device processor 204, and server-device data storage 206,all of which are communicatively connected by a server-device system bus208. The structure of the server 102 that is presented in FIG. 2 is byway of example and not limitation, as other structures could be utilizedas well or instead in different implementations. In some instances, theserver 102 may also include a server-device user interface (notdepicted).

The server-device communication interface 202 may include one or morewireless-communication interfaces (for communicating according to, e.g.,LTE, Wi-Fi, Bluetooth, and/or the like) and/or one or morewired-communication interfaces (for communicating according to, e.g.,Ethernet, USB, and/or the like). As such, the server-devicecommunication interface 202 may include any necessary hardware (e.g.,chipsets, antennas, Ethernet cards, etc.), any necessary firmware, andany necessary software for conducting one or more forms of communicationwith one or more other entities as described herein.

The server-device processor 204 may include one or more processors ofany type deemed suitable by those of skill in the relevant art, someexamples including a general-purpose microprocessor and a dedicateddigital signal processor (DSP).

The server-device data storage 206 may take the form of anynon-transitory computer-readable medium or combination of such media,some examples including flash memory, read-only memory (ROM), andrandom-access memory (RAM) to name but a few, as any one or more typesof non-transitory data-storage technology deemed suitable by those ofskill in the relevant art could be used. The server-device data storage206 contains server-device program instructions 210 that are executableby the server-device processor 204 for carrying out various server-sidefunctions described herein.

FIG. 3 depicts an example structure of an example one of the client-sidecomputing devices of FIG. 1, in accordance with at least one embodiment.In particular, FIG. 3 depicts an example structure of a representativeclient-side computing device 300, which could represent the desktopcomputer 128, the desktop computer 130, the desktop computer 132, thedesktop computer 134, the tablet 142, the laptop computer 144, thelaptop computer 146, or any other client-side computing device deemedsuitable by those of skill in the art for a particular implementation.As depicted in the example of FIG. 3, the client-side computing device300 includes a client-device communication interface 302, aclient-device user interface 304, a client-device processor 306, andclient-device data storage 308, all of which are communicativelyconnected by a client-device system bus 310. The structure of theclient-side computing device 300 that is presented in FIG. 3 is by wayof example and not limitation, as other structures could be utilized aswell or instead in various different implementations.

The client-device communication interface 302 may include one or morewireless-communication interfaces (for communicating according to, e.g.,LTE, Wi-Fi, Bluetooth, and/or the like) and/or one or morewired-communication interfaces (for communicating according to, e.g.,Ethernet, USB, and/or the like). As such, the client-devicecommunication interface 302 may include any necessary hardware (e.g.,chipsets, antennas, Ethernet cards, etc.), any necessary firmware, andany necessary software for conducting one or more forms of communicationwith one or more other entities as described herein.

The client-device user interface 304 may include one or more inputdevices (a.k.a. components and the like) and/or one or more outputdevices (a.k.a. components and the like). With respect to input devices,the client-device user interface 304 may include one or moretouchscreens, keyboards, mice, trackpads, touchpads, other pointingdevices, buttons, switches, knobs, microphones, and/or the like. Withrespect to output devices, the client-device user interface 304 mayinclude one or more displays, monitors, speakers, LEDs, and/or the like.Moreover, one or more components (e.g., an interactivetouchscreen-and-display component) of the client-device user interface304 could provide both user-input and user-output functionality. Andcertainly other user-interface components could be used in variousdifferent contexts.

The client-device processor 306 may include one or more processors ofany type deemed suitable by those of skill in the relevant art, someexamples including a general-purpose microprocessor and a dedicated DSP.

The client-device data storage 308 may take the form of anynon-transitory computer-readable medium or combination of such media,some examples including flash memory, ROM, and RAM to name but a few, asany one or more types of non-transitory data-storage technology deemedsuitable by those of skill in the relevant art could be used. Theclient-device data storage 308 contains client-device programinstructions 312 that are executable by the client-device processor 306for carrying out various client-side functions described herein,including but not limited to the method 400 of FIG. 4.

Before proceeding with the balance of this detailed description, aparticular linguistic point is worth making. The following two differentterms are used in this disclosure: (i) client-side user interface and(ii) client-device user interface. The latter, client-device userinterface, refers to hardware components, software drivers, and the likethat are part of and/or installed on a given client-side computingdevice, consistent with the above description of the client-device userinterface 304. Thus, a given client-device user interface is a permanentor at least semi-permanent part of its respective client-side computingdevice. The former, client-side user interface, refers in thisdisclosure to the executing codebase and corresponding presented visualelements that are particular to the present systems and methods.

Some characteristics of a representative embodiment are that (i) thecodebase is a downloaded JavaScript codebase and (ii) the client-sideuser interface is presented via a web browser (that itself wouldnaturally be presented via the client-device user interface (e.g., thedisplay monitor) of the client-side computing device that has downloadedand is executing the JavaScript codebase). Of course these are onlyexamples, but they serve to illustrate the distinction betweenclient-side user interface and client-device user interface as thoseterms are used herein. In another example, a client-side computingdevice is a tablet: the client-device user interface includes thephysical touchscreen of that tablet; the client-side user interface ofthe present methods and systems may be presented in a web browser or aninstalled application that is executing on the client-side computingdevice (i.e., tablet). And certainly other examples could be presentedhere as well.

FIG. 4 depicts an example method, in accordance with at least oneembodiment. In particular, FIG. 4 depicts an example method 400 that isdescribed below by way of example and not limitation as being carriedout by the desktop computer 128 of FIG. 1. As stated above, the desktopcomputer 128 is an example of a client-side computing device; as such,any mention of any particular components of the desktop computer 128will use the 300-series component numbering of FIG. 3. In otherexamples, any other suitably equipped, programmed, and configuredclient-side computing device could carry out the method 400.

Prior to describing the particular steps of the method 400, thisdisclosure first presents, in FIGS. 5-14, an introductory series ofexample screenshots that could be presented as or via the client-sideuser interface of the present systems and methods. In at least oneembodiment, these screenshots are presented via a web browser that isbeing executed by the desktop computer 128. Thus, the rendereduser-interface elements, text, and so on would correspond with HTML codethat is provided to and then displayed by the web browser (e.g.,Microsoft Edge®, Microsoft Internet Explorer®, Mozilla Firefox®, AppleSafari®, Google Chrome®, and the like). This HTML code could begenerated at least in part by runtime execution of JavaScript code. Inat least one embodiment, a static-URL implementation is used acrossscreenshots, such that the displayed URL doesn't change, thoughasynchronous (e.g., AJAX) messaging can be going on in the background,resulting in changes to the displayed information. Such aspects ofmodern web programming are within the skill of those in the art, and arethus not exhaustively explained herein.

FIG. 5 shows an example first screen that a student might be presentedwith after first passing through one or more conventional HTML screensdirecting the student through activities such as logging in to anaccount and clicking on the particular assignment with which thescreenshot 500 is associated. The screenshot 500 includes conventionalwindow-management icons 502, which are selectable for functions such asminimize, restore, and close. The screenshot 500 also includes a heading504 that lists an example course (“English 101”), an example unit(“Poetry”) in that course, and the title (“The Roller Coaster”) of theparticular (fictitious) poem on which this example assignment is based.The screenshot 500 also includes a central-question element 510, whichdisplays the overall question to which the student is ultimately taskedwith writing an argument in response, as is more fully explained below.

The screenshot 500 also includes a content-display-pane control panel508, which has six separately selectable elements that are labeled “(A)Overview,” “(B) Vocabulary,” “(C) Text,” “(D) Rubric,” “(E) Highlights,”and “(F) Your Work.” The starred “A” icon corresponding with the“Overview” element indicates that the “Overview” element is thecurrently selected element in the content-display-pane control panel508. The screenshot 500 further includes a content-display pane 512, inwhich the currently displayed content is determined by which element ofthe content-display-pane control panel 508 is currently selected. In thescreenshot 500, in which the “Overview” element of thecontent-display-pane control panel 508 is currently selected, thecontent-display pane 512 includes (i) a content-display-pane header 516having a matching starred “A” icon and header text reading “TopicOverview” and (ii) a text-display element 518 that includes text thatprovides an overview of the source-material selection (i.e., the poem)that is the subject of this assignment; in FIG. 5, there is aplaceholder sentence for such an overview (rather than an actualsubstantive overview).

The screenshot 500 also includes a working-display-pane control panel ,which has six separately selectable elements that are labeled “(1)Connect,” “(2) Read,” “(3) Engage with the Text,” “(4) Summarize,” “(5)Build an Argument,” and “(6) Compose.” The working-display-pane controlpanel 506 also includes navigational controls: in FIG. 5, there is onlya “next” navigational control since the currently selected element isthe first one (i.e., “Connect”) (as indicated by the starred “1” icon);in other figures in which one of the middle four elements is currentlyselected, both a “previous” navigational control and a “next”navigational control are displayed; in figures in which the last element(i.e., “Compose”) is currently selected, there is only a “previous”navigational control, as is conventional in the art. It is noted thatthe six separately selectable elements in the working-display-panecontrol panel 506 correspond to an ordered series of predefineddifferent types of user-input stages for producing the composition basedon the source-material selection, as is more fully described below.

The screenshot 500 also includes a working-display pane 514, in whichthe currently displayed content is determined by which element of theworking-display-pane control panel 506 is currently selected. In thescreenshot 500, in which the “Connect” element of theworking-display-pane control panel 506 is currently selected, theworking-display pane 514 includes (i) a correspondingworking-pane-display header 520 having a matching starred “1” icon andheader text reading “Step 1: Connect,” (ii) some text instructions thatindicate to the student what their (example) assigned task is for thisfirst step, and (iii) a text-editor element 522 that includes atext-editor toolbar 524 and a text-entry input field 526; the student istasked with entering text in the text-entry input field 526 that isresponsive to the task instructions.

In at least one embodiment, the client-side user interface responds toany (or periodically detected, or the like) text changes in thetext-entry input field 526 by locally saving the current text andmarking (in a manner not necessarily apparent to the student user) thetext-entry input field 526 as being in a “dirty” state (i.e., containingdifferent input than what (if anything) had previously been saved). Asis known in the arts of web programming, memory (e.g., cache) design andmanagement, and the like, elements are often initialized to a “clean”state, marked “dirty” upon a substantive change being detected, and thenreset to clean after that substantive change has been saved to anupstream (and typically relatively more stable) entity such as a remoteserver, a hard drive, and/or the like. In various different embodiments,the client-side user interface may include input-field-specificindications of student input having been locally and/or remotely stored;moreover, overall indications of whether all then-entered student inputhas been locally and/or remotely stored may be provided as well. Andcertainly other example implementations could be listed here.

The next five figures (i.e., FIGS. 6-10) correspond to respectivescreenshots that the client-side user interface presents to the studentuser in at least one embodiment when that student user successivelyclicks one by one down the selectable elements of thecontent-display-pane control panel 508. Thus, FIG. 6 corresponds to thestudent having clicked on the “(B) Vocabulary” element, FIG. 7corresponds to the student having thereafter clicked on the “(C) Text”element, and so forth. It is noted that, while not required, it is thecase in this series of screenshots that clicking down through thoseelements does not change what is currently displayed in theworking-display pane 514. It is also noted that, in the depictedembodiment, the central-question element 510 remains displayed on eachof those screenshots as well, to keep the central question in the mindof the student user throughout their work on the various assignable andassessable subtasks that make up the overall assignment.

As stated above, FIG. 6 corresponds to a scenario in which the student,while viewing the screenshot 500 of FIG. 5, clicked on the “(B)Vocabulary” element in the content-display-pane control panel 508,resulting in the screenshot 600 of FIG. 6. Elements that are common toboth the screenshot 500 and the screenshot 600 are not redundantlymentioned here, and this convention is carried through the balance ofthis detailed description of the drawings. As can be seen in FIG. 6, thecontent-display pane 512 now includes (i) a content-display-pane header602 having a matching starred “B” icon and header text reading “TopicVocabulary” and (ii) a text-display element 604 that includes aselection of vocabulary words pertaining to the source-materialselection. By way of example, five placeholder words (with correspondingparts of speech and definitions) are displayed in the screenshot 600.

If, while viewing the screenshot 600, the student clicked on the “(C)Text” element in the content-display-pane control panel 508, the student(in this depicted example embodiment) would then be presented with thescreenshot 700 of FIG. 7. The content-display pane 512 now includes (i)a content-display-pane header 702 having a matching starred “C” icon andheader text reading “Source-Material Text,” (ii) a text-display element704, and (iii) an embedded media player 706. The text-display element704 lists the title and the author of the subject source-materialselection, the text of the source-material selection itself, and anembedded image 708 that may have been selected as an appropriateaccompaniment to the source-material selection. The embedded mediaplayer 706 may be operable to provide the student with an audiblerecitation of the source-material selection, which may enhance thestudent's learning process. In some embodiments, the embedded mediaplayer 706 plays video instead or as well.

The student may next click on the “(D) Rubric” element in thecontent-display-pane control panel 508, and accordingly be presentedwith the screenshot 800 of FIG. 8. The content-display pane 512 nowincludes (i) a content-display-pane header 702 having a matching starred“D” icon and header text reading “Rubric” and (ii)a text element 804that includes some evaluation-criteria text pertaining to this overallassignment and that also includes a selectable element 808 that couldprovide the student with a complete rubric for the assignment, perhapsin the form of a downloaded PDF file, a webpage opening in a new tab orwindow, and/or some other option deemed suitable by those of skill inthe art. As known in the educational arts, a rubric is a set ofevaluation criteria and/or expectations for a given assignment, unit,topic, semester, course, and/or the like. In the depicted embodiment,the rubric pertains to this assignment, perhaps drawing on morepervasive themes that the teacher wishes to reinforce across multipleassignments.

If the student next clicks on the “(E) Highlights” element in thecontent-display-pane control panel 508, the student may next bepresented with the screenshot 900 of FIG. 9. The content-display pane512 now includes (i) a content-display-pane header 902 having a matchingstarred “E” icon and header text reading “Highlights” and (ii) a displayelement 904 that includes an example set of three highlight annotationsthat the student may have made while participating in Step 3 (i.e.,“Engage with the Text”), which is described below. It can be seen thateach of the three highlight annotations includes a respective indicationof category or type of highlight (which may be represented by arespective color, as described below), the word itself that washighlighted by the student, and any highlight-specific notes that thestudent may have entered in connection with highlighting that particularword (or phrase).

The student may next, while viewing the screenshot 900 of FIG. 9, clickon the “(F) Your Work” element of the content-display-pane control panel508, resulting in the student being presented with the screenshot 1000of FIG. 10. In the screenshot 1000, the content-display pane 512 nowincludes (i) a content-display-pane header 1002 having a matchingstarred “F” icon and header text reading “Your Work,” (ii) a connectelement 1004 that corresponds with Step 1 (i.e., “Connect”), (iii) asummarize element 1006 that corresponds with Step 4 (i.e., “Summarize”),and (iv) an argument-staging-area element 1008 that corresponds withStep 5 (i.e., “Build an Argument”).

And while the argument-staging-area element 1008 provides the studentwith a specific type of argument-building staging area (i.e., workspace)that is described more fully below, indeed the entire “Your Work” viewof the content-display pane 512 more generally provides the student userwith a designated staging area for multiple types of user work productpertaining to the source-material selection. The example screenshot 1000corresponds with a time where the student has, for example, completedStep 1 (“Connect”) (by entering the displayed text (i.e., “This is someexample text, describing a personal experience.”) in the text-entryinput field 526 of the text-editor element 522 that is displayed in theworking-display pane 514, but has yet to complete either Step 4(“Summarize”) or Step 5 (“Engage with the Text”).

The above descriptions of FIGS. 5-10 correspond respectively to thevarious elements of the content-display-pane control panel 508 beingselected one by one in descending order according to how they arevisually presented. In each of the screenshots of FIGS. 5-9, theworking-display pane 514 appeared the same, and then it changed in FIG.10 when the student user completed Step 1 (“Connect”) as describedabove. It is noted that the text that the student entered in thetext-entry input field 526 was auto-populated to the connect element1004 of the “Your Work” view of the content-display pane 512, asrepresented by the dashed arrow 1010. It is further noted that thisoccurs whether or not the “Your Work” view is currently being displayedin the content-display pane 512; that is, if the “Rubric” view wascurrently displayed at the time the student entered the text into thetext-entry input field 526, and the student thereafter clicked on the“(F) Your Work” element in the content-display-pane control panel 508,that entered text would still have been auto-populated to, and thuswould appear in, the connect element 1004. The introductory series ofexample screenshots concludes below with descriptions of FIGS. 11-14,which pertain to Step 2 (“Read”) (FIG. 11), Step 3 (“Engage with theText”) (FIG. 12), and Step 4 (“Summarize”) (FIGS. 13-14).

FIG. 11 depicts an example screenshot 1100 that in at least oneembodiment is presented to the student user after the student hasclicked (in any order) on the “(B) Vocabulary” element in thecontent-display-pane control panel 508 and the “(2) Read” element in theworking-display-pane control panel 506. This sequence of clicks couldhave, though need not have, started at a time when the student wasviewing the example screenshot 1000 of FIG. 10. Moreover, in at leastone embodiment, the student simply clicking on the “(2) Read” element inthe working-display-pane control panel 506 results in both thesource-material-selection view in the content-display pane 512 and thebelow-described multiple-choice view in the working-display pane 514.

As a result of that sequence of clicks, the content-display pane 512displays the source-material-text view that is described above inconnection with FIG. 7, and the working-display pane 514 displays amultiple-choice view that includes (i) a working-display-pane header1102 having a matching starred “2” icon and header text reading “Step 2:Read” and (ii) a multiple-choice-display element 1104 that includes (a)an example set of three multiple-choice questions pertaining to thesource-material selection and (b) a realtime-results element 1106. Ascan be seen in FIG. 11, by way of example, the student has correctlyanswered the first question, incorrectly answered the second question,and has yet to answer the third question. Some embodiments allow forstudents to correct initially incorrect answers, while some embodimentsdo not. Moreover, some embodiments give students a chance to declaretheir answer as their “final answer,” while some embodiments do not.This “Step 2: Read” exercise, which includes some multiple-choicequestions (and could certainly instead or in addition include one ormore questions or other exercises of one or more other types) is yetanother way that the present systems and methods help the student engagewith a given text to a helpful extent prior to asking the student toconstruct (and then assisting the student with constructing) a pertinentargument.

Speaking of engaging with the text, the student may next click on the“(3) Engage with the Text” element in the working-display-pane controlpanel 506 (and it is noted that in this and other examples describedherein, the student may use the “previous” and “next” navigationalcontrols in the working-display-pane control panel 506). This may resultin the student being presented with the example screenshot 1200 of FIG.12. In the screenshot 1200, the content-display pane 512 is stilldisplaying the source-material-text view, while the working-display pane514 is displaying an engagement view that includes (i) aworking-display-pane header 1202 having a matching starred “3” icon andheader text reading “Step 3: Engage with the Text” and (ii) ahighlight-instruction-display element 1204 that includes some textinstructions followed by three example pairs of highlight colors withcorresponding types of words/phrases that the student is tasked withlocating in the source-material selection and then highlighting with theappropriate color.

As mentioned above, in connection with a given instance of highlightinga given word or phrase, the student has the option of includinghighlight-specific notes as well. In an embodiment, after highlighting agiven word or phrase, the student may be able to right click on thehighlighted word or phrase to open a small notepad-like text elementinto which the student can enter highlight-specific notes. In anembodiment, the “Yellow,” “Blue”, and “Green” (or whatever colors arechosen for a given implementation) indicators in thehighlight-instruction-display element 1204 are selectable by the user toactivate an appropriately colored text-highlighting tool. In someembodiments, that sort of right-click functionality to add notes inconnection with various specific parts of the source-material selectionis provided whether the right-clicked-on text is highlighted or not. Andcertainly other implementations are possible.

If the student next clicked on—or perhaps used the “next” navigationalcontrol to advance to—Step 4 (“Summarize”), the student may then bepresented with the screenshot 1300 of FIG. 13, in which theworking-display pane 514 includes (i) a working-display-pane header 1302having a matching starred “4” icon and header text reading “Step 4:Summarize,” (ii) textual instructions for this task, and (iii) atext-editor element 1304 that includes a text-editor toolbar 1306 and atext-entry input field 1308. The textual instructions ask the student tosummarize the source-material selection in a few sentences, and givesthe student the option to use some provided sentence stubs to help getthem started. The example screenshot 1400 of FIG. 14 is quite similar tothe example screenshot 1300 of FIG. 13, other than that the student hasfilled in the blanks, thereby turning the provided sentence stubs intocomplete sentences. The present systems and methods then responsivelylocally save and perhaps also remotely save that entered text (alongwith the text that was already there), and also auto-populate the fulltext of that completed summary into the summarize element 1006.

The above description of FIGS. 5-14 represents an introductory series ofscreenshots pertaining to the structure and various features of thepresent systems and methods. The ensuing description returns to themethod 400 of FIG. 4, and in particular to discussing the various steps402-408 of the method 400. In discussing those steps, the ensuingdescription bounces back and forth between describing FIG. 4 anddescribing the remaining figures.

Returning, then, to FIG. 4, at step 402, the desktop computer 128presents, via a client-side user interface of an educational platform, aplurality of user-interface input fields that are initially arranged onthe client-side user interface according to a predefined sequence, whereeach of the user-interface input fields has a respectiveargument-element type from among a plurality of argument-element types.This step is helpfully illustrated by the screenshot 1500 of FIG. 15,which may be presented to the student upon the student advancing to theStep 5 (“Build an Argument”) element of the working-display-pane controlpanel 506, perhaps from the screenshot 1400 of FIG. 14.

Thus, the client-side user interface presents the screenshot 1500, inwhich the working-display pane 514 includes (i) a working-display-paneheader 1502 having a matching starred “5” icon and header text reading“Step 5: Build an Argument,” (ii) a plurality of user-interface inputfields (1504-1512), and (iii) an argument-element-adding panel 1514. Theplurality of user-interface input fields includes a claim input field1504, a reason input field 1506, an evidence input field 1508, areasoning input field 1510, and a counterargument input field 1512. Eachof the input fields 1504-1512 may, as in the depicted embodiment, beprepopulated with some helpful text that defines for the student whattype of text would be appropriate for the particular input field and/orprovides one or more examples of appropriate text for the particularinput field. In the example screenshot 1500, that helpful text is whatis referenced by the phrases “Claim Guidance,” “Reason Guidance,” andthe like that appear in the respective input fields before the studenthas entered any text in the respective fields.

If the student wishes at any point in the argument-building process toadd an additional input field with the argument-element type set toReason, Evidence, Reasoning, or Counterargument, the student can simplyclick on the appropriate element in the argument-element-adding panel1514, at which point an additional instance of the corresponding type ofinput field will be added. In an embodiment, students can also deleteone or more input fields, perhaps by clicking on an “x” icon as iscustomary in the art.

In an embodiment, a claim is an overall assertion that the student ismaking in response to the central question, and thus there wouldtypically only be a single argument element having the argument-elementtype of Claim. In an embodiment, a reason is a somewhat-summary-levelexplanation as to why the author is asserting that the claim is correct.In an embodiment, evidence is one or more actual examples from thesource-material selection that support the explanation given in theReason. In an embodiment, the reasoning field may include text where thestudent is further expounding in more detail regarding why the providedevidence represents support for the corresponding reason. In anembodiment, the counterargument field may be intended for text thatlists a reason why the student's claim is wrong in the opinion of some,and also that includes text overcoming that counterargument. Andcertainly other argument-element types (and composition-element typesmore generally) could be used in various different implementations.

Returning to FIG. 4, at step 404, the desktop computer 128 receivestextual inputs via the respective user-interface input fields, andresponsively presents corresponding argument-building-block elements viathe client-side user interface according to a current arrangement on theclient-side user interface of the user-interface input fields, whereeach presented argument-building-block element (i) has the sameargument-element type as the corresponding user-interface input fieldand (ii) includes the textual input received via the correspondinguser-interface input field. Step 404 is helpfully illustrated by asequence of screenshots starting with the screenshot 1600 of FIG. 16.

It is noted that, for space concerns, several figures, including FIG. 16contain fewer elements than the more comprehensive screenshots such asthe screenshot 1500 of FIG. 15. Moreover, in figures such as FIG. 16,the user-interface elements that are displayed are often shown having abigger size than those same elements occupy on the more comprehensivescreenshots. This technique of illustration and depiction is notintended to imply that the elements that are depicted in figures such asFIG. 16 include everything that the student user would see. Furthermore,some of the elements in FIG. 16 and others like it, such as the arrows1644, are presented for illustrative and explanatory purposes in thisdetailed description, but would not necessarily be actually visible tothe student user during operation.

The screenshot 1600 of FIG. 16 corresponds to a time when the studenthas not yet entered text into any of the input fields 1504-1512. Thescreenshot 1600 does show, however, that an initially blankargument-building-block element 1602-1610 is provided in theargument-staging-area element 1008 in correspondence with each of therespective input fields 1504-1512. The argument-building-block element1602 includes an argument-element-type indication 1612 that indicatesthat the type is Claim, a copy-to-composition button 1622, and atext-display space 1632. The argument-building-block element 1604includes an argument-element-type indication 1614 that indicates thatthe type is Reason, a copy-to-composition button 1624, and atext-display space 1634. The argument-building-block element 1606includes an argument-element-type indication 1616 that indicates thatthe type is Evidence, a copy-to-composition button 1626, and atext-display space 1636. The argument-building-block element 1608includes an argument-element-type indication 1618 that indicates thatthe type is Reasoning, a copy-to-composition button 1628, and atext-display space 1638. The argument-building-block element 1610includes an argument-element-type indication 1620 that indicates thatthe type is Counterargument, a copy-to-composition button 1630, and atext-display space 1640.

The arrows 1644 indicate the one-to-one correspondence between therespective input fields 1504-1512 and the corresponding respectiveargument-building-block elements 1602-1610. The argument-staging-areaelement 1008 also includes a copy-all-to-composition button 1642, whichis discussed more fully below, but in general thecopy-all-to-composition button 1642 operates as if each of theindividual copy-to-composition buttons 1622-1630 were actuated in theorder displayed.

The screenshot 1700 of FIG. 17 shows that when the student enters sometext into the claim input field 1504, that text is saved by the systemand auto-populated into the text-display space 1632 of the correspondingargument-building-block element 1602. It is noted that the recitation instep 404 of responsively presenting an argument-building-block elementresponsive to receiving text via a given input field encompasses bothfilling data in with respect to an already-created blankargument-building block element as well as the possibility of generatingthe argument-building-block element only once the text has been enteredand/or saved. The screenshots 1800-2100 of FIGS. 18-21 show insuccession a sequence where the student enters text into the inputfields 1506-1512. Similar to how the system auto-populated the textentered in the claim input field 1504 into the argument-building-blockelement 1602, the system populates the text entered into the inputfields 1506-1512 into the respective text-display spaces 1634-1640 ofthe respective argument-building-block elements 1604-1610.

Moreover, it is noted that manual text entry into input fields such asthe input fields 1504-1512 is not the only way thatargument-building-block elements can be generated and presented. In someembodiments, the highlighting of text as part of Step 3 (“Engage withthe Text”) causes corresponding argument-building-block elements to begenerated that contain the highlighted text and that may have theargument-element type equal to Evidence. In other embodiments, once sometext is highlighted in the source-material selection, the student may beable to right click and/or enter some other user-interface command tocause a corresponding argument-building-block element to be created inthe argument-staging-area element 1008. It can be seen in FIG. 21 forexample that the presented argument-building-block elements 1602-1610may have the appearance of respective index cards. In some embodiments,this visual presentation could be further enhanced by including graphicssuch as red and/or blue horizontal lines on the graphical index cards.And certainly other example implementations are possible.

The example screenshot 2200 of FIG. 22 may correspond to the studenthaving completed Step 5 (“Build an Argument”) and then advanced theworking-display-pane control panel 506 such that Step 6 (“Compose”) isthen selected. This results in the working-display pane 514 displaying(i) a working-display-pane header 2202 that includes a matching starred“6” icon and the header text “Step 6: Compose,” (ii) textual taskinstructions, (iii) some suggestion text, and (iv) a text-editor element2204 that includes a text-editor toolbar 2206 and a text-editing space2208. The task instructions direct the student to use the organizedargument elements that the student by now has stored in their “YourWork” space to compose/construct an argument that is responsive to thecentral question. The suggestion text recommends to the student thatthey start their argument with the summary that they created in Step 4(“Summarize”). In the depicted embodiment, once the student has advancedto having Step 6 (“Compose”) be displayed in the working-display pane514, a copy-to-composition button 2210 is displayed in the summarizeelement 1006 of the your-work view that is being displayed in thecontent-display pane 512. The screenshot 2300 of FIG. 23, by way of thearrow 2302, graphically depicts that when the student actuates thecopy-to-composition button 2210, the text from the summarize element1006 is auto-populated into the text-editing space 2208.

In some embodiments, the system enables the student, when working onStep 5 (“Build an Argument”), to reorder (e.g., by drag and drop) theinput fields 1504-1512 and/or the argument-building-block elements1602-1610. Upon receiving such reordering input with respect to theinput fields 1504-1512, the system responsively reorders thecorresponding argument-building-block elements 1602-1610 in the samemanner. Similarly, upon receiving reordering input with respect to theargument-building-block elements 1602-1610, the system responsivelyreorders the corresponding input fields 1504-1512 in the same manner.

Moreover, the system in some embodiments permits linking of sequentialinput fields 1504-1512 and/or argument-building-block elements1602-1610. The student may link such elements by highlighting multipleelements, by using a “Control +Click” command as is known in the art, aright click, and/or any other suitable user-interface interaction bywhich a student could indicate that two or more sequential input fields1504-1512 or two or more sequential argument-building-block elements1602-1610 should be linked. Such linking relationships may also be ableto be undone by the user. Moreover, in at least one embodiment, anyreordering of input fields 1504-1512 and/or argument-building-blockelements 1602-1610 would keep any then-current linking relationshipsintact. Moreover, in some embodiments, a copy-to-composition commandentered with respect to any argument-building-block element 1602-1610 ina linked relationship would apply to all argument-building-blockelements in the linked relationship (e.g., by auto-populating into thecomposition their respective text, concatenated in the linked order).And certainly other implementations are possible as well.

Returning to FIG. 4, at step 406, the desktop computer 128 receives, viathe client-side user interface, argument-building selections of one ormore of the presented argument-building-block elements, and responsivelygenerates a composition in a displayed text editor at least in part bypopulating the textual inputs into the displayed text editor accordingto the received argument-building selections. Step 406 in at least oneembodiment is illustrated in the example screenshot 2400 of FIG. 24.There it can be seen that the argument-building-block elements 1602-1610have the text in them from Step 5 (“Building an Argument”). The arrows2402 depict that actuation of the copy-to-composition buttons 1622-1630in an order of how they are displayed from top to bottom results in thecorresponding text in the corresponding text-display spaces 1632-1640 ofthe argument-building-block elements 1602-1610 being copied over to thetext-editing space 2208. Now that the student is working on Step 6(“Compose”), a submit-composition button 2404 is displayed in theworking-display pane 514 below the text-editor element 2204. It is notedthat, in this described example, the submit-composition button 2404 hasnot yet been actuated.

It is further noted that the argument-building selections of step 406could take the form of respective actuations (e.g., respective singleclicks or respective double clicks) of the copy-to-composition buttons1622-1630, though they could also take the form of actuation of thecopy-all-to-composition button 1642. In other embodiments, the studentuser is able to drag and drop text from the argument-staging-areaelement 1008 to the text-editing space 2208. And certainly numerousother possible implementations could be listed here as well. Moreover,as is shown in the example screenshot 2500 of FIG. 25, the student userin at least one embodiment can further edit the text after it has beenpopulated into the text-editor element 2204. In the screenshot 2500, thestudent has edited the separately populated sentences into more of aconventional paragraph form; and certainly other types of edits andformatting changes could be carried out as well.

Returning to FIG. 4, at step 408, the desktop computer 128 submits thegenerated composition for evaluation. In an embodiment, step 408 iscarried out as a result of the client-side user interface detectingactuation of the submit-composition button 2404. In an embodiment, thegenerated composition is transmitted from the desktop computer 128 tothe server 102 in, for example, an HTTP message. In some embodiments,the client-side user interface that is being executed by the desktopcomputer 128 in this example iteratively saves the generated compositionto the server 102. In such examples, step 408 may simply involvetransmitting a message to the server 102 to indicate that theiteratively saved composition has been deemed submitted for evaluation.In some embodiments, evaluation is or at least includes grading in aneducational context.

It can happen that educational institutions experience intermittentInternet connectivity. Thus, in some embodiments, the client-side userinterface monitors (e.g., with polling messages, keep-alive messages,and/or the like) presence and absence of connectivity to the server 102.In some such embodiments, the client-side user interface operates in alocal-saving mode during absence of connectivity and instead operates ina remote-saving mode during presence of connectivity.

As also discussed above, the desktop computer 128 may detect, via theexecuting client-side user interface, a modification to the textualinput in a given user-interface field 1504-1512, and responsively updatea status parameter of the given user-interface field from a clean stateto a dirty state; moreover, the executing client-side user interface maythen include the given user-interface field in a save operation on thebasis of the status parameter of the given user-interface field being inthe dirty state. Moreover, the client-side user interface may thereafterdetermine that the save operation was successful, and responsivelyupdate the status parameter of the given user-interface field to theclean state.

In some embodiments, the client-side user interface detects what isreferred to herein as a save-triggering event, and responsively makes atleast one save attempt to save the student's current work (e.g.,incremental work by the student with respect to a previous save) to theserver 102. In at least one such embodiment, the save-triggering eventincludes what is referred to herein as a focus-change event. This couldtake the form of the student closing a user-interface element, hiding(e.g., minimizing) a user-interface element, and/or switching from oneuser-interface element to another. One example of the latter case mightinvolve detecting that the student has modified a first user-interfaceelement and then selected (e.g., clicked on) a second (i.e., different)user-interface element; another example might involve detecting that thestudent has modified a first user-interface element and then actuallyalso modified a second (i.e., different) user-interface element. In someembodiments, a save-triggering event takes the form of or at leastincludes detecting that the student has reordered two or more elements(e.g., input fields 1504-1512 or argument-building-block elements1602-1610). And certainly other examples could be listed as well.

In at least one embodiment, making at least one save attempt includesmaking a first save attempt and initiating an attempt timer, as well asdetecting an expiration of the attempt timer, and responsively making asecond save attempt. And certainly any number of save attempts could bemade using any suitable number of timers. Upon detecting failure to savethe student's work to the server 102 by each and every save attempt inthe at least one save attempt, the client-side user interface mayresponsively transition to a read-only state, so that no additional workby the student will go unsaved and therefore be lost to the student.

The client-side user interface may transition to the read-only state fora predetermined time period, after which the client-side user interfacemay make at least one additional save attempt to save the student'scurrent work to the server 102. If that works, the client-side userinterface may transition back to its initial and default read/writestate; if it doesn't work, the client-side user interface may remain inthe read-only state for at least another predetermined time period. Andcertainly numerous other possible implementations could be listed here.As represented by the above examples, the student's current work maypertain to multiple different types of assigned tasks, such as free-textentry, multiple-choice-question answering, text annotation, and/or oneor more other types of tasks.

As mentioned above, the client-side user interface of the presentsystems and methods may be realized at least in part by runtimeexecution of a JavaScript codebase. In some such embodiments, thisJavaScript codebase defines a model referred to herein as anargument-builder studentResponse model. In some such embodiments, theargument-builder studentResponse model is a child model of a JavaScriptstudentAssignment model that corresponds to the overall assignment.Thus, the studentAssignment model may correspond to all of the Steps 1-6that are discussed above, and may include multiple differentstudentResponse models, each of which may correspond with a respectiveone of those Steps 1-6. The argument-builder studentResponse model wouldcorrespond with Step 5 (“Building an Argument”). Each childstudentResponse model of the parent studentAssignment model may functionto detect student input and responsively locally save that studentinput. Each child studentResponse model may further have responsibilityfor saving its respective locally saved student input to the server 102,and to report to the parent studentAssignment model using a promise toindicate success or failure to do so. And certainly otherimplementations are possible, as this is but one example.

What is claimed is:
 1. A method comprising: presenting, via aclient-side user interface of an educational platform, a plurality ofuser-interface input fields initially arranged on the client-side userinterface according to a predefined sequence, wherein each of theuser-interface input fields has a respective argument-element type fromamong a plurality of argument-element types; receiving textual inputsvia the respective user-interface input fields, and responsivelypresenting corresponding argument-building-block elements via theclient-side user interface according to a current arrangement on theclient-side user interface of the user-interface input fields, whereineach presented argument-building-block element (i) has the sameargument-element type as the corresponding user-interface input fieldand (ii) comprises the textual input received via the correspondinguser-interface input field; receiving, via the client-side userinterface, argument-building selections of one or more of the presentedargument-building-block elements, and responsively generating acomposition in a displayed text editor at least in part by populatingthe textual inputs into the displayed text editor according to thereceived argument-building selections; and submitting the generatedcomposition for evaluation.
 2. The method of claim 1, wherein: theplurality of argument-element types comprises claim, reasoning,evidence, reason, and counterargument; and the predefined sequence isclaim, reason, evidence, reasoning, counterargument.
 3. The method ofclaim 1, wherein the generated composition pertains to a source-materialselection, the method further comprising: presenting, via theclient-side user interface, the source-material selection injuxtaposition with the presented plurality of user-interface inputfields.
 4. The method of claim 3, further comprising: receivingannotation input with respect to the presented source-materialselection, and responsively updating the presented source-materialselection to reflect the received annotation input.
 5. The method ofclaim 1, wherein the presented argument-building-block elements have theappearance of respective index cards.
 6. The method of claim 1, whereinpresenting the corresponding argument-building-block elements via theclient-side user interface comprises presenting the correspondingargument-building-block elements in a designated staging area on theclient-side user interface.
 7. The method of claim 1, furthercomprising: receiving, via the client-side user interface, reorderinginput with respect to the user-interface input fields, and responsivelyreordering both the user-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input.
 8. The method of claim 1, further comprising:receiving, via the client-side user interface, reordering input withrespect to the argument-building-block elements, and responsivelyreordering both the user-interface input fields and the correspondingargument-building-block elements in accordance with the receivedreordering input.
 9. The method of claim 1, wherein the client-side userinterface includes a dedicated content-display pane and a dedicatedworking pane.
 10. The method of claim 9, wherein the client-side userinterface further includes: a first control panel for selecting what isdisplayed in the dedicated content-display pane from among a pluralityof content-display options; and a second control panel for selectingwhat is displayed in the dedicated working pane from among a pluralityof working-pane options.
 11. The method of claim 10, wherein theplurality of content-display options comprises two or more of asource-material selection on which the composition is to be based, anoverview of the source-material selection, a selection of vocabularypertaining to the source-material selection, a rubric pertaining to thecomposition, a set of user annotations of the source-material selection,and a designated staging area for user work product pertaining to thesource-material selection.
 12. The method of claim 11, wherein theplurality of working-pane options comprises an ordered series ofpredefined different types of user-input stages for producing thecomposition based on the source-material selection.
 13. The method ofclaim 10, wherein the plurality of working-pane options comprises anordered series of predefined different types of user-input stages forproducing the composition based on a source-material selection.
 14. Themethod of claim 1, further comprising: receiving text-modification inputvia the displayed text editor with respect to the populated textualinputs, wherein generating the composition further comprises modifyingthe populated textual inputs in the displayed text editor according tothe received text-modification input prior to submitting the generatedcomposition for evaluation.
 15. The method of claim 1, carried out atleast in part by a web browser executing on a processor-basedcomputing-and-communication system.
 16. The method of claim 1, carriedout at least in part by runtime execution of JavaScript code.
 17. Themethod of claim 1, carried out at least in part by a JavaScriptargument-builder studentResponse model.
 18. The method of claim 17,wherein the JavaScript argument-builder studentResponse model is a childmodel of a JavaScript studentAssignment model.
 19. The method of claim18, wherein the JavaScript studentAssignment model comprises at leastone additional child JavaScript studentResponse model other than theJavaScript argument-builder studentResponse model, wherein the at leastone additional child JavaScript studentResponse model has a differentstudent-input format than that of the JavaScript argument-builderstudentResponse model.
 20. A client-side computing device comprising: aclient-device communication interface; a client-device user interface; aclient-device processor; and client-device data storage containingclient-device instructions executable by the client-device processor forcausing the client-side computing device to carry out a set offunctions, wherein the set of functions includes: presenting, via aclient-side user interface of an educational platform via theclient-device user interface, a plurality of user-interface input fieldsinitially arranged on the client-side user interface according to apredefined sequence, wherein each of the user-interface input fields hasa respective argument-element type from among a plurality ofargument-element types; receiving textual inputs via the respectiveuser-interface input fields, and responsively presenting correspondingargument-building-block elements via the client-side user interfaceaccording to a current arrangement on the client-side user interface ofthe user-interface input fields, wherein each presentedargument-building-block element (i) has the same argument-element typeas the corresponding user-interface input field and (ii) comprises thetextual input received via the corresponding user-interface input field;receiving, via the client-side user interface, argument-buildingselections of one or more of the presented argument-building-blockelements, and responsively generating a composition in a displayed texteditor at least in part by populating the textual inputs into thedisplayed text editor according to the received argument-buildingselections; and submitting, via the communication interface, thegenerated composition for evaluation.